<template>
  <Page title="上传解析">
    <template v-slot:navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">上传解析</span>
        </div>
      </div>
    </template>
    <template v-slot:content>
      <div class="w-full h-full">
        <div class="container w-full h-full bg-white flex flex-col relative">
          <div class="banner flex-1 mb-10px overflow-scroll">
            <img class="w-full h-full" :src="explanation" mode="" v-show="explanation" />
            <img
              class="clear absolute"
              src="static/icons/close-warning.png"
              mode=""
              @click="clear"
              v-show="explanation"
            />
          </div>
          <div class="camera" @click="upload" style="font-size: 0">
            <img class="icon" src="@/assets/wqbook/upload@2x.png" mode="" />
          </div>
          <div class="upload">
            <CustomButton class="block" style="width:100%;height: 100%;" @click="submit">上传 </CustomButton>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/newPage.vue'
import CustomButton from '@/components/button/index'
import { mapState } from 'vuex'
import { updateStudentQuestionApi } from '@/api/wq-book/index.js'
import { uploadImage } from '@/utils'

export default {
  components: {
    Page,
    CustomButton
  },
  data() {
    return {
      explanation: ''
    }
  },
  computed: {
    ...mapState(['wqBook'])
  },
  mounted() {
    console.log(this.wqBook)
  },
  methods: {
    back() {
      if (this.onBack) {
        this.onBack()
      } else {
        this.$router.go(-1)
      }
    },
    async upload() {
      const { android_call } = window
      if (!android_call || !window.android) {
        const base64 = await uploadImage()
        this.explanation = base64
      } else {
        const callback = (base64) => {
          this.explanation = 'data:image/png;base64,' + base64
          this.$message.success('上传成功！')
        }

        const callBackName = `fn${new Date().getTime()}`
        window.android_call[callBackName] = callback.bind(this)

        android.takePhoto(callBackName)
      }
    },
    clear() {
      this.explanation = ''
    },
    async submit() {
      const { questionId } = this.wqBook.editingQuestion
      const { explanation } = this

      if (!explanation) return
console.log("不是吧！")
      const { data: success } = await updateStudentQuestionApi({
        id: questionId,
        imgBase64List: [explanation.replace('data:image/png;base64,', '')]
      })

      if (success) {
        this.$router.replace('/pages/wq-book/index/index')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.container {
  padding: 35px 40px;
  box-sizing: border-box;
  .banner {
    height: 432px;
    margin-bottom: 20px;
    .clear {
      width: 30px;
      height: 30px;
      top:20px;
      right:25px;
    }
  }

  .camera {
    height: 232px;
    .icon {
      width: 140px;
      height: 140px;
    }
  }

  .upload {
    // margin: 0 auto;
    width:453px;
    height: 60px;
    position: absolute;
    bottom: 66px;
    z-index: 2;
    left: calc(50% - 226.5px);
  }
}
</style>
